Sigma Web Development

📒 Notes for Lecture 20: CSS Challenge – Styling Specific Paragraphs

• HTML Structure:
  • Five <div class="para"> blocks, each containing:
  • An <h1> heading (“Here is the First/Second/… div”)
  • Five <p> paragraphs with placeholder lorem text
  • Do not modify the given HTML: only apply CSS rules
• CSS Objective:
  • In each <div>, the first <p> must have: background-color: yellow; and color: red;
  • All other paragraphs in that same <div> must have: background-color: blue; and color: white;
• Key Selectors Used:
  • div p:first-of-type – targets the very first <p> inside any <div>
  • div p:not(:first-of-type) – targets all <p> elements except the first one within the same <div>
• CSS Rules (style.css):
  • * { margin:0; padding:0; box-sizing:border-box; } – reset
  • div { border: 2px solid black; padding: 20px; margin-bottom: 20px; min-height: 100vh; }
  • div h1 { text-align: center; background-color: aqua; margin-bottom: 50px; }
  • div p:first-of-type { font-size: 20px; line-height: 1.5; background-color: yellow; color: red; margin-bottom: 10px; }
  • div p:not(:first-of-type) { background-color: blue; color: white; line-height: 1.5; font-size: 20px; }
• Outcome:
  • Every <div> block’s first paragraph stands out with yellow/red styling
  • Subsequent paragraphs share a uniform blue/white look for consistency